<template>
	<view class="content">
		<!-- <view class="wrap animated fadeIn" >
			<u-video :list="wraplist" mode="loop" border-radius="10" height="350"></u-video>
		</view> -->
		<view class="wrap animated fadeIn" :style=" 'animation-delay:' +0.4 +'s !important;'">
			<zg-swiper :list="swiperList"></zg-swiper>
		</view>
		<view class="map animated fadeIn" :style=" 'animation-delay:' +0.4 +'s !important;'">
			<view>
				<u-icon name="map-fill" color="#fff" size="35" :label="ScenicList.address" label-color="#fff"
					margin-left="20" @click="mapClick(ScenicList)"></u-icon>
			</view>
			<view>
				<u-icon name="phone" color="#fff" size="30" :label="ScenicList.kf" label-color="#fff"
					margin-left="20" @click="delClick"></u-icon>
			</view>
		</view>
		<!-- 订单 -->
		<view class="tabs">
			<u-tabs :list="list" :is-scroll="true" :font-size="40" :current="current" @change="change"
				active-color="#efb43e"></u-tabs>
		</view>
		<view class="cell-item">
			<Crad :list="ticketList" @replyBar="replyBar" :type="5"></Crad>
		</view>
		<!-- 订单须知 -->
		<view class="inform animated fadeIn" :style=" 'animation-delay:' +0.4 +'s !important;'">
			<view class="inform-title">| 预定须知 |</view>
			<view class="inform-text" v-for="(item,index) in ScenicList" :key="item.id">
				<u-parse :html="item.pre"></u-parse>
			</view>
		</view>
		<authDialog :isAuthShow="isAuthShow" @authConfirm="authConfirm" @cancel="cancel"></authDialog>
		<view class="inform-body"></view>
		<u-toast ref="uToast" />
		<u-popup  v-model="show" :mask-close-able="true" mode="center" width="300px" height="200px" border-radius="14"
			close-icon-color="#ccc">
			<view style="padding: 10rpx;display: flex;align-items: center;flex-direction: column;">
				<view
					style="display: flex;align-items: center;justify-content: center;font-size:20px;font-weight: 800;;padding-top: 20rpx">
					温馨提示</view>
				<view style="width: 100%;padding: 20rpx;font-size:18px;">
					{{policy}}
				</view>
				<u-button type="primary" style="margin-top: 40rpx;" @click="show = false">关闭</u-button>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import Crad from '@/components/crad/crad.vue'
	import Json from '@/utils/Json.js';
	import ZgSwiper from '@/components/zhuge-swiper/zhuge-swiper';
	export default {
		components: {
			Crad,
			ZgSwiper
		},
		data() {
			return {
				ticketList: [],
				ScenicList: [],
				wraplist: [],
				toPageid: '',
				isAuthShow: false,
				list: [],
				current: 0,
				swiperList: [
					// 	{
					// 	type: 'video',
					// 	src: '../../static/01.mp4',
					// 	poster: '../../static/logo.jpg'
					// }, {
					// 	type: 'image',
					// 	src: '../../static/logo.jpg'
					// },
				],
				show: false,
				policy: ''
			}
		},
		onShow() {
		},
		onReady() {
			
		},
		onLoad(e) {
			this.getTicketList()
			try {
				uni.setStorageSync('member_id', e.scene);
			} catch (e) {}
		},
		methods: {
			replyBar(id) {
				this.toPageid = id
				if (this.vuex_new_user) {
					this.isAuthShow = true
				} else {
					this.$u.route({
						url: 'pages/order/index?id=' + this.toPageid,
					})
				}
			},
			// 授权
			authConfirm() {
				let that = this
				setTimeout(function() {
						console.log(!that.vuex_new_user)
						//if (!that.vuex_new_user) {
						that.isAuthShow = false
						that.$u.route({
							url: 'pages/order/index?id=' + that.toPageid,
						})
						//	}
					},
					500)
			},
			// 放弃授权
			cancel() {
				this.isAuthShow = false;
			},
			// tabs
			change(index) {
				console.log('change',index);
				this.current = index;
				uni.setStorageSync('current',this.current)
				this.ticketList = this.list[index].ticket
				console.log("++++++++++++++++++++++++++", this.ticketList);
			},
			mapClick(e) {
				uni.openLocation({
					latitude: e.gis.lat,
					longitude: e.gis.lng,
				});
			},
			delClick() {
				uni.makePhoneCall({
					phoneNumber: this.ScenicList.kf
				});
			},
			// 票型列表
			getTicketList() {
				let that = this;
				let postData = {
					"scenic_id": '1038'
				};
				that.$u.post('/api/ticket/list', postData).then(res => {
					that.ScenicList = res.scenic
					that.ticketList = res.tickets[0].ticket
					console.log(res, "---------121-------");
					if (res.scenic.info.policy) {
						that.show = true
						that.policy = res.scenic.info.policy
					}
					that.swiperList = res.scenic.images
					console.log("+++++++++++++++++++", that.swiperList);
					let temp = res.tickets
					temp.map(item => {
						item['name'] = item.title
					});
					that.list = temp;
          this.change(0);
					for (let i = 0; i < res.scenic.info.images.length; i++) {
						that.wraplist.push({
							"image": res.scenic.info.images[i]
						})
					}
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		.wrap {
			padding: 10rpx 20rpx;
		}

		.map {
			padding: 10rpx;
			background-color: #efb43e;
			margin: 0 20rpx;
			border-radius: 8rpx;

			view {
				color: #FFFFFF;
				padding: 10rpx;

				&:nth-child(2) {
					padding: 0rpx 20rpx;
				}
			}
		}

		

		.tabs {
			position: -webkit-sticky;
			/* safari 浏览器 */
			position: sticky;
			z-index: 999;
			/* 其他浏览器 */
			top: 0rpx;
			margin: 20rpx;
		}

		.cell-item {
			.cell {
				border-bottom: 1rpx solid #e5e5e5;
				margin: 10rpx auto;
				background-color: #FFFFFF;
				padding: 20rpx;
				display: flex;
				justify-content: space-around;
				width: 100%;

				image {
					margin-top: 20rpx;
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
				}

				.cell-content {
					width: 60%;

					text {
						margin-left: 20rpx;
						color: #bf2727;
					}

					u-tag {
						margin: 20rpx;
					}

					view {
						padding: 7rpx 20rpx;
					}

					.sales {
						font-size: 25rpx;
						color: #adadad;
					}

					.contains {
						font-size: 22rpx;
						color: #efb43e;
					}
				}
			}

			.cell-price {
				margin: 20rpx 0rpx;
				width: 25%;

				text {
					font-size: 30rpx;
				}

				u-tag {
					display: flex;
					justify-content: center;
				}

				view {
					color: #efb43e;
					font-size: 40rpx;
					padding: 10rpx 0rpx;
					margin-top: 40rpx;
				}
			}
		}

		.inform {
			background-color: #FFFFFF;
			width: 100%;
			padding: 30rpx;

			.inform-title {
				margin-bottom: 20rpx;
				font-size: 40rpx;
				color: #000000;
			}



			view {
				font-size: 32rpx;
			}

			.inform-text {
				color: #737373;
				font-size: 27rpx;
			}
		}
	}
</style>
